<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet" />
<!-- bootstrap-progressbar -->
<link href="/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">

<!-- page content -->
<div id="profileDiv" class="right_col" role="main">
    <div class="">
        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-12 col-sm-12 ">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>User Profile</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">Settings 1</a>
                                    <a class="dropdown-item" href="#">Settings 2</a>
                                </div>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>

                    <div class="x_content">
                        <div class="col-md-3 col-sm-3  profile_left">
                            <div class="profile_img">
                                <div id="crop-avatar">
                                    <!-- Current avatar -->
                                    <img class="img-responsive avatar-view"
                                         :src="user.userImage" alt="Avatar" title="Change the avatar">
                                </div>
                            </div>
                            <h3>{{user.userName}}</h3>

                            <a class="btn btn-success" data-toggle="modal" data-target="#editProfile">
                                <i class="fa fa-edit m-right-xs"></i>Edit Profile
                            </a>
                            <br />
                        </div>

                        <div class="col-xs-12 col-sm-9">
                            <div class="profile-user-info profile-user-info-striped">
                                <div class="profile-info-row">
                                    <div class="profile-info-name"> UserName</div>

                                    <div class="profile-info-value">
                                        <span class="editable editable-click">{{user.userName}}</span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name">Email</div>

                                    <div class="profile-info-value">
                                        <span class="editable editable-click">{{user.email}}</span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name"> Location</div>

                                    <div class="profile-info-value">
                                        <i class="fa fa-map-marker light-orange bigger-110"></i>
                                        <span class="editable editable-click" id="country">Netherlands</span>
                                        <span class="editable editable-click" id="city">Amsterdam</span>
                                    </div>
                                </div>

                                <div class="profile-info-row">
                                    <div class="profile-info-name"> Age</div>

                                    <div class="profile-info-value">
                                        <span class="editable editable-click" id="age">38</span>
                                    </div>
                                </div>

                                <div class="profile-info-row">
                                    <div class="profile-info-name"> Joined</div>

                                    <div class="profile-info-value">
                                        <span class="editable editable-click" id="signup">2010/06/20</span>
                                    </div>
                                </div>

                                <div class="profile-info-row">
                                    <div class="profile-info-name"> Last Online</div>

                                    <div class="profile-info-value">
                                        <span class="editable editable-click" id="login">3 hours ago</span>
                                    </div>
                                </div>

                                <div class="profile-info-row">
                                    <div class="profile-info-name"> About Me</div>

                                    <div class="profile-info-value">
                                        <span class="editable editable-click" id="about">Editable as WYSIWYG</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div th:replace="account/profileEdit"></div>
</div>
<!-- /page content -->

<!-- fileinput -->
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<!-- bootstrap-progressbar -->
<script src="/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"
        type="text/javascript"></script>

<script type="text/javascript">
    var ProfileVue = new Vue({
        el: "#profileDiv",
        data: {
            user: {
                id: "",
                email: "",
                userName: "",
                password: "",
                userImage: "",
                roles: [],
            }
        },
        methods: {
            initProfule: function () {
                var self = this;
                self.user.id = $("#userId").val();
                $.ajax({
                    url : "/api/user/" + self.user.id,
                    type : "get",
                    success : function (rs) {
                        if (rs.userImage == "") {
                            rs.userImage = "/images/picture.jpg";
                        }
                        self.user = rs;
                    },
                    error : function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },
            initUploadImage: function () {
                var self = this;
                $("#uploadImage").fileinput({
                    uploadUrl: "/api/image/profile-big",
                    enctype: 'multipart/form-data',
                    previewFileType: "image",
                    uploadAsync: true,
                    allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                    maxFileCount: 1,
                    maxFileSize: 1024,
                    minImageWidth: 50,
                    minImageHeight: 50,
                    maxImageWidth: 1000,
                    maxImageHeight: 1000,
                    msgFilesTooMany: "Upload file count({n} - {m})",
                    showCaption: false,
                    dropZoneEnabled:false,
                    showBrowse: true,
                    browseClass: "btn btn-primary",
                    uploadClass: "btn btn-info",
                    removeClass: "btn btn-danger"
                }).on('fileerror', function (event, data, msg) {
                    layer.alert("Upload file failed" + msg, {icon: 0});
                }).on('fileuploaded', function (event, data) {
                    if (data.response.status == 200) {
                        self.user.userImage = data.response.data;
                    } else {
                        $(".fileinput-remove-button").click();
                    }
                    layer.alert(data.response.message, {icon: 0});
                }).on('fileclear', function (event) {
                });
            },
            updateModule: function () {
                var self = this;
                $.ajax({
                    url : "/api/user",
                    type : "put",
                    contentType: "application/json",
                    data : JSON.stringify(self.user),
                    success : function (rs) {
                        layer.alert(rs.message, {icon: 0});
                    },
                    error : function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            }
        },
        mounted: function () {
            this.initProfule();
            this.initUploadImage();
        }
    });
</script>